<template>
  <div>
    <section class="searchBox">
      <van-search
        v-model="value"
        shape="round"
        show-action
        background="#4fc08d"
        label="寻找ui"
        placeholder="请输入搜索关键词#,或者数字"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch(value)">
            搜索
          </div>
        </template>
      </van-search>
    </section>
    <div class="room">
      <section class="demo-home">
        <sui-vbtn title="alert 弹窗 " @click.native="onSearch('alert')"></sui-vbtn>
        <sui-vbtn title="confirm 弹窗 " @click.native="onSearch('confirm')"></sui-vbtn>
        <sui-vbtn title="Button 按钮 " @click.native="onSearch('btn')"></sui-vbtn>
        <sui-vbtn title="Cell 单元格 " @click.native="onSearch('cell')"></sui-vbtn>
        <sui-vbtn title="Popup 弹出层 " @click.native="onSearch('popup')"></sui-vbtn>
        <sui-vbtn title="Style 段落、边框 " @click.native="onSearch('style')"></sui-vbtn>
        <sui-vbtn title="Field 输入框 " @click.native="onSearch('field')"></sui-vbtn>
        <sui-vbtn title="Form 表单 " @click.native="onSearch('form')"></sui-vbtn>
      </section>
      <section class="list">
        <div class="li">#或者1:表示1行1列</div>
        <div class="li">##或者2:表示1行2列</div>
        <div class="li">###或者3:表示1行3列</div>
        <div class="li">#,#或者1,1:表示2行1列</div>
        <div class="li">#,##或者1,2:表示1行1列，1行2列</div>
        <div class="li">##,#:或者2,1表示1行2列，1行1列</div>
        <div class="li">。。。</div>
      </section>
    </div>

  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  data () {
    return {
      value: this.$route.query.q
    }
  },
  created () {
  },
  methods: {
    onSearch (val) {
      this.$router.push({
        path: '/search',
        query: {
          q: val
        }
      })
    },
    onCancel () {

    }
  }
}
</script>
<style  type="text/css" lang="less" scoped>
.searchBox{
  margin: 0 auto;
}
.room{
  padding: 20px 20Px 0;
  display: flex;
}
.demo-home{
  padding: 46px 20px 20px;
  box-shadow: 0Px 4Px 12Px 4Px #ddd;
  width: 375Px;
  min-height: 667Px;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
}
  .list{
    padding: 0 20Px;
  }
</style>
